<template>
    <div id="content">
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" class="item">
            <!-- <div slot="waterfall-head">waterfall-head</div> -->
            <!-- <div class="img-info" slot-scope="props">
                <p class="some-info">第{{ props.index + 1 }}张图片</p>
                <p class="some-info">{{ props.value.info }}</p>
            </div> -->
            <!-- <div slot="waterfall-over">waterfall-over</div> -->
        </vue-waterfall-easy>
        <!-- <h3>fjkdkfkffk</h3> -->
    </div>
</template>
<script>
// import QrcodeReader from "./components/QrcodeReader.vue"
// import axios from 'axios'
/* eslint-disable */
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
    name: 'WaterPlugin',
    components: {
        vueWaterfallEasy
    },
    data() {
        return {
            imgsArr: [
                {
                    title: 'DCDH WCOMM--1',
                    info: '百万团票,优化8折',
                    src: '/photos/1.webp'
                },
                {
                    title: 'William Chavez--2',
                    info: '百万团购,优化9折',
                    src: '/photos/2.webp'

                },
                {
                    title: 'Janice Graham--3',
                    info: '领劵后,立即20 只需12',
                    src: '/photos/3.webp'

                },
                {
                    title: 'Rosa Soto--4',
                    info: '立即参与万人团拼单',
                    src: '/photos/4.webp'

                },
                {
                    title: 'DCDH WCOMM--5',
                    info: '百万团票,优化8折',
                    src: '/photos/5.webp'

                },
                {
                    title: 'William Chavez--6',
                    info: '百万团购,优化9折',
                    src: '/photos/6.webp'

                },
                {
                    title: 'Janice Graham--7',
                    info: '领劵后,立即20 只需12',
                    src: '/photos/7.webp'

                },
                {
                    title: 'Rosa Soto--8',
                    info: '立即参与万人团拼单',
                    src: '/photos/8.webp'

                },
            ],
            group: 1,// request param
        }
    },

    methods: {
        // getData() {
        //   // In the real environment,the backend will return a new image array based on the parameter group.
        //   // Here I simulate it with a stunned json file.
        //   axios.get('../static/mock/data.json?group=' + this.group)
        //     .then(res => {
        //       this.imgsArr = this.imgsArr.concat(res.data)
        //       this.group++
        //     }, (e) => {
        //       console.log(e);
        //     })
        // },
        getData() {
            if (this.imgsArr.length >= 20) {
                return
            }
            this.imgsArr = this.imgsArr.concat(this.imgsArr)
        }
    },
    created() {
        this.getData()
    }
}
</script>

<style lang="scss" scoped>
#content {
    position: absolute;
    top: 0rem;
    bottom: 0;
    left: 0rem;
    width: 100%;
}

h3 {
    background-color: bisque;
}
</style>
